'use client'

import * as React from 'react'

import {
  useIndentTodoToolBarButton,
  useIndentTodoToolBarButtonState,
} from '@udecode/plate-indent-list/react'
import { ListTodoIcon } from 'lucide-react'

import { ToolbarButton } from './toolbar'

export function IndentTodoToolbarButton(
  props: React.ComponentProps<typeof ToolbarButton>,
) {
  const state = useIndentTodoToolBarButtonState({ nodeType: 'todo' })
  const { props: buttonProps } = useIndentTodoToolBarButton(state)

  return (
    <ToolbarButton {...props} {...buttonProps} tooltip="Todo">
      <ListTodoIcon />
    </ToolbarButton>
  )
}
